<template>
    <div class="l-rblock" >
        <el-input
                ref="main"
                :readonly="dialogVisible"
                :placeholder="$t(placeholder)"
                v-model="showValue"
                :size="size"
                :clearable="disabled?false:clearable"
                :disabled="disabled"
                @focus="handleShow">
            <span slot="append"
                    @click="handleShow">
                <el-button slot="append" icon="el-icon-document"></el-button>
            </span>
        </el-input>
        <l-dialog
            :title="$t(placeholder)"
            :visible.sync="dialogVisible"
            :height="480"
            width="800px"
            :hasBtns="multiple"

            @opened="handleDialogOpened"
            >
            <l-layout class="l-tab-page">
                <template #left >
                    <l-panel :title="$t('表单分类')" style="padding-right:0;" >
                        <el-tree  ref="tree" v-loading="treeLoading" node-key="id" :highlight-current="true"  :data="dataItemTree_FormSort"   @node-click="handleNodeClick">
                            <span class="lr-tree-node"  slot-scope="{ node }">
                                <i class="el-icon-notebook-2"></i>
                                {{ node.label }}
                            </span>
                        </el-tree>
                    </l-panel>
                </template>
                <l-select-panel
                    v-model="selectValue"
                    ref="selectPanel"
                    valueKey="f_Id"
                    :columns="columns"
                    :loadSelectTable="loadSelectTable"
                    :multiple="multiple"

                    @change="handleSelectPanel"

                    style="padding:8px;padding-left:0;"
                >
                    <template v-slot:f_Category="scope" >
                       {{lr_dataItemName(lr_dataItem['FormSort'],scope.row.f_Category)}}
                    </template>
                    <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
                </l-select-panel>
            </l-layout>
        </l-dialog>

        <l-dialog
            :title="`${$t('表单预览')}-${$t(previewTitle)}`"
            :visible.sync="previewVisible"
            :height="600"
            width="800px"
            :hasBtns="false"

            @opened="handlePreviewOpened"
            @closed="handlePreviewClosed"
            >
            <preview :loading="previewLoading" ref="preview" ></preview>
        </l-dialog>
    </div>
</template>

<script>
import preview from '../../views/scheme/preview.vue'
const api = window.$api.custmerForm.scheme
export default {
    name:'l-custmerform-select',
    components: {
        preview
    },
    props: {
        value:{},
        size:String,
        placeholder:{
            type:String,
            default:'请选择表单'
        },
        disabled:{
            type:Boolean,
            default:false
        },
        clearable:{
            type:Boolean,
            default:true
        },
        multiple:{
            type:Boolean,
            default:false
        },
        sidx:{
            type:String,
            default:'F_CreateDate DESC'
        }
    },
    data () {
        return {
            // 表单预览
            previewVisible:false,
            previewTitle:'',
            previewLoading:false,

            isLoading:false,
            treeLoading:false,
            category:'',

            dialogVisible:false,
            text:'',
            columns: [
                {label:'名称',prop:'f_Name',minWidth:'150'},
                {label:'分类',prop:'f_Category',width:'120',align:'center'}
            ],
            tableBtns:[
                {prop:'Preview',label:'预览'}
            ]
        }
    },
    computed:{
        dataItemTree_FormSort(){
            return this.lr_dataItemTree(this.lr_dataItem['FormSort'])
        },
        selectValue:{
            get(){
                return this.value;
            },
            set(val){
                this.$emit('input',val);
            }
        },
        showValue:{
            get(){
                return this.text;
            },
            set(val){
                this.$emit('change',null);
                this.text = val;
                this.$emit('input',val);
            }
        }
    },
    watch:{
        value:{
            handler(){
                this.setText()
            },
            immediate: true
        }
    },
    mounted () {
        this.lr_loadDataItem('FormSort')
    },
    methods:{
        async setText(){
            let value = this.value;
            if(this.$validatenull(value)){
                this.text = ''
            }
            else {
                let isGetByApi = true;
                if(this.$refs.selectPanel){
                    let select =  await this.$refs.selectPanel.getSelected(false);
                    if(select.length != 0 && select[0].f_Id == value){
                        isGetByApi = false;
                        this.text = select.f_Name;
                    }
                }
                if(isGetByApi){
                    let select = await this.$awaitWraper(api.getInfo(value));
                    this.text = select.f_Name;
                }
            }
        },
        handleNodeClick(node){
            this.category = node.value
            this.tableLoadData()
        },
        handleChange(val){
            this.$emit('change',val)
        },
        handleShow(){
            this.dialogVisible = true
        },
        tableLoadData(){
            this.$refs.selectPanel.init()
        },
        loadSelectTable(postData){
            postData.sidx = this.sidx
            postData.isEnabled = true
            postData.category = this.category
            return this.$awaitWraper(api.getPage(postData))
        },
        handleDialogOpened(){
            this.tableLoadData()
        },
        async handleSelectPanel(){
            let obj =  await this.$refs.selectPanel.getSelected(false)[0];
            this.handleChange(obj)
            this.$refs.main.focus()
            this.$refs.main.blur()
            this.dialogVisible = false
        },
        handlePreview($index,row){
            this.formEditRow = row
            this.previewLoading = true
            this.previewVisible = true
            this.previewTitle = row.f_Name
        },
        handlePreviewOpened(){
            api.getHistory(this.formEditRow.f_SchemeId).then(res=>{
                this.$refs.preview.setForm(res.data.data)
                this.previewLoading = false
            }).catch(()=>{
                this.previewLoading = false
            })
        },
        handlePreviewClosed(){
            this.$refs.preview.resetForm()
        },
    }
}
</script>